'use client';

import { Fragment } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import { X, Sparkles, Check, AlertCircle } from 'lucide-react';
import GlassButton from './GlassButton';

interface AIClassifyModalProps {
  isOpen: boolean;
  onClose: () => void;
  documentTitle: string;
  suggestedCategory?: string;
  confidence: number;
  reasoning: string;
  isLoading: boolean;
  error?: string;
  onApply: () => void;
  onReject: () => void;
}

export default function AIClassifyModal({
  isOpen,
  onClose,
  documentTitle,
  suggestedCategory,
  confidence,
  reasoning,
  isLoading,
  error,
  onApply,
  onReject,
}: AIClassifyModalProps) {
  // 根据置信度计算颜色
  const getConfidenceColor = (conf: number) => {
    if (conf >= 0.8) return 'from-green-500 to-emerald-500';
    if (conf >= 0.6) return 'from-blue-500 to-cyan-500';
    if (conf >= 0.4) return 'from-yellow-500 to-orange-500';
    return 'from-red-500 to-pink-500';
  };

  const getConfidenceLabel = (conf: number) => {
    if (conf >= 0.8) return '高置信度';
    if (conf >= 0.6) return '中等置信度';
    if (conf >= 0.4) return '较低置信度';
    return '低置信度';
  };

  return (
    <Transition appear show={isOpen} as={Fragment}>
      <Dialog as="div" className="relative z-50" onClose={onClose}>
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-100"
          leave="ease-in duration-200"
          leaveFrom="opacity-100"
          leaveTo="opacity-0"
        >
          <div className="fixed inset-0 bg-black/50 backdrop-blur-sm" />
        </Transition.Child>

        <div className="fixed inset-0 overflow-y-auto">
          <div className="flex min-h-full items-center justify-center p-4">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-3xl bg-white/90 dark:bg-gray-900/90 backdrop-blur-xl border border-gray-200/40 dark:border-white/10 p-6 shadow-2xl transition-all">
                {/* Header */}
                <div className="flex items-start justify-between mb-6">
                  <div className="flex items-center gap-3">
                    <div className="p-3 rounded-2xl bg-gradient-to-br from-purple-500/20 to-pink-500/20">
                      <Sparkles className="h-6 w-6 text-purple-600 dark:text-purple-400" />
                    </div>
                    <div>
                      <Dialog.Title className="text-2xl font-bold text-gray-900 dark:text-white">
                        AI 智能分类建议
                      </Dialog.Title>
                      <p className="text-sm text-gray-600 dark:text-white/60 mt-1">
                        {documentTitle}
                      </p>
                    </div>
                  </div>
                  <button
                    onClick={onClose}
                    className="p-2 rounded-xl hover:bg-gray-100 dark:hover:bg-white/10 transition-colors"
                  >
                    <X className="h-5 w-5 text-gray-500" />
                  </button>
                </div>

                {/* Content */}
                <div className="space-y-4">
                  {isLoading ? (
                    <div className="flex flex-col items-center justify-center py-12">
                      <div className="relative">
                        <div className="h-16 w-16 rounded-full border-4 border-purple-200 dark:border-purple-900"></div>
                        <div className="absolute top-0 h-16 w-16 rounded-full border-4 border-t-purple-600 dark:border-t-purple-400 animate-spin"></div>
                      </div>
                      <p className="mt-4 text-gray-600 dark:text-white/60">
                        AI 正在分析文档内容...
                      </p>
                    </div>
                  ) : error ? (
                    <div className="bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/30 rounded-xl p-4">
                      <div className="flex items-start gap-3">
                        <AlertCircle className="h-5 w-5 text-red-600 dark:text-red-400 mt-0.5" />
                        <div>
                          <h3 className="font-semibold text-red-900 dark:text-red-300">
                            分类失败
                          </h3>
                          <p className="text-sm text-red-700 dark:text-red-400 mt-1">
                            {error}
                          </p>
                        </div>
                      </div>
                    </div>
                  ) : (
                    <>
                      {/* 建议分类 */}
                      <div className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-500/10 dark:to-pink-500/10 border border-purple-200/40 dark:border-purple-500/30 rounded-xl p-6">
                        <div className="flex items-center justify-between mb-3">
                          <h3 className="text-lg font-bold text-gray-900 dark:text-white">
                            建议分类
                          </h3>
                          <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full bg-gradient-to-r ${getConfidenceColor(confidence)} text-white text-sm font-semibold shadow-lg`}>
                            <span>{(confidence * 100).toFixed(0)}%</span>
                            <span className="text-xs opacity-90">
                              {getConfidenceLabel(confidence)}
                            </span>
                          </div>
                        </div>
                        
                        <div className="flex items-center gap-2 mb-4">
                          <div className="px-4 py-2 bg-white dark:bg-gray-800 rounded-lg border border-gray-200/40 dark:border-white/10">
                            <span className="text-xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent dark:from-purple-400 dark:to-pink-400">
                              {suggestedCategory || '无建议'}
                            </span>
                          </div>
                        </div>

                        {/* 置信度进度条 */}
                        <div className="relative w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                          <div
                            className={`absolute left-0 top-0 h-full bg-gradient-to-r ${getConfidenceColor(confidence)} transition-all duration-500`}
                            style={{ width: `${confidence * 100}%` }}
                          ></div>
                        </div>
                      </div>

                      {/* 分析理由 */}
                      <div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-500/10 dark:to-indigo-500/10 border border-blue-200/40 dark:border-blue-500/30 rounded-xl p-6">
                        <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3">
                          分析理由
                        </h3>
                        <p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
                          {reasoning}
                        </p>
                      </div>

                      {/* 提示信息 */}
                      <div className="bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/30 rounded-xl p-4">
                        <p className="text-sm text-amber-800 dark:text-amber-200">
                          💡 提示：您可以选择应用AI建议的分类，或手动选择其他分类。
                        </p>
                      </div>
                    </>
                  )}
                </div>

                {/* Footer */}
                {!isLoading && !error && (
                  <div className="flex justify-end gap-3 mt-6 pt-6 border-t border-gray-200/40 dark:border-white/10">
                    <GlassButton
                      onClick={onReject}
                      variant="secondary"
                      size="md"
                    >
                      <X className="h-4 w-4 mr-2" />
                      忽略建议
                    </GlassButton>
                    <GlassButton
                      onClick={onApply}
                      variant="primary"
                      size="md"
                      disabled={!suggestedCategory}
                    >
                      <Check className="h-4 w-4 mr-2" />
                      应用分类
                    </GlassButton>
                  </div>
                )}

                {error && (
                  <div className="flex justify-end mt-6 pt-6 border-t border-gray-200/40 dark:border-white/10">
                    <GlassButton
                      onClick={onClose}
                      variant="secondary"
                      size="md"
                    >
                      关闭
                    </GlassButton>
                  </div>
                )}
              </Dialog.Panel>
            </Transition.Child>
          </div>
        </div>
      </Dialog>
    </Transition>
  );
}

